<template>
    <a-drawer
        :title="formData.id ? '编辑应用表单属性管理' : '增加应用表单属性管理'"
        :width="600"
        :visible="visible"
        :destroy-on-close="true"
        :footer-style="{ textAlign: 'right' }"
        @close="onClose"
    >
        <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
            <a-form-item label="名称：" name="name">
                <a-input v-model:value="formData.name" placeholder="请输入名称" allow-clear />
            </a-form-item>
            <a-form-item label="类型：" name="inputType">
                <a-select v-model:value="formData.inputType" placeholder="请选择类型" :options="inputTypeOptions" />
            </a-form-item>
            <a-form-item label="数据类型：" name="dataType">
                <a-select v-model:value="formData.dataType" placeholder="请选择数据类型" :options="dataTypeOptions" />
            </a-form-item>
            <a-form-item label="是否可为空：" name="isEmpty">
                <a-select v-model:value="formData.isEmpty" placeholder="请选择是否可为空" :options="isEmptyOptions" />
            </a-form-item>
            <a-form-item label="参数归属类别：" name="category">
                <a-select v-model:value="formData.category" placeholder="请选择参数归属类别" :options="categoryOptions" />
            </a-form-item>
            <a-form-item label="字段名称描述：" name="nameDesc">
                <a-input v-model:value="formData.nameDesc" placeholder="请输入字段名称描述" allow-clear />
            </a-form-item>
            <a-form-item label="正则表达式：" name="regEx">
                <a-input v-model:value="formData.regEx" placeholder="请输入正则表达式" allow-clear />
            </a-form-item>
            <a-form-item label="排序码：" name="sortCode">
                <a-input v-model:value="formData.sortCode" placeholder="请输入排序码" allow-clear />
            </a-form-item>
            <a-form-item label="状态：" name="status">
                <a-select v-model:value="formData.status" placeholder="请输入状态" :options="statusOptions" allow-clear />
            </a-form-item>
        </a-form>
        <template #footer>
            <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
            <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
        </template>
    </a-drawer>
</template>

<script setup name="appFormPropertiesForm">
    import tool from '@/utils/tool'
    import { cloneDeep } from 'lodash-es'
    import { required } from '@/utils/formRules'
    import appFormPropertiesApi from '@/api/biz/appFormPropertiesApi'
    // 抽屉状态
    const visible = ref(false)
    const emit = defineEmits({ successful: null })
    const formRef = ref()
    // 表单数据
    const formData = ref({})
    const submitLoading = ref(false)
    const inputTypeOptions = ref([])
    const dataTypeOptions = ref([])
    const isEmptyOptions = ref([])
    const categoryOptions = ref([])
    const statusOptions = ref([])

    // 打开抽屉
    const onOpen = (record) => {
        visible.value = true
        if (record) {
            let recordData = cloneDeep(record)
            formData.value = Object.assign({}, recordData)
        }
        inputTypeOptions.value = tool.dictList('zylx')
        dataTypeOptions.value = tool.dictList('fieldJavaTypeOptions')
        isEmptyOptions.value = tool.dictList('yorn')
        categoryOptions.value = tool.dictList('app_form_category')
        statusOptions.value = tool.dictList('status')
    }
    // 关闭抽屉
    const onClose = () => {
        formRef.value.resetFields()
        formData.value = {}
        visible.value = false
    }
    // 默认要校验的
    const formRules = {
        name: [required('请输入名称')],
        inputType: [required('请输入类型')],
        dataType: [required('请输入数据类型')],
        isEmpty: [required('请输入是否可为空')],
        category: [required('请输入参数归属类别')],
        nameDesc: [required('请输入字段名称描述')],
    }
    // 验证并提交数据
    const onSubmit = () => {
        formRef.value
            .validate()
            .then(() => {
                submitLoading.value = true
                const formDataParam = cloneDeep(formData.value)
                appFormPropertiesApi
                    .appFormPropertiesSubmitForm(formDataParam, !formDataParam.id)
                    .then(() => {
                        onClose()
                        emit('successful')
                    })
                    .finally(() => {
                        submitLoading.value = false
                    })
            })
    }
    // 抛出函数
    defineExpose({
        onOpen
    })
</script>
